<!DOCTYPE html> 
<html> 
<head> 
    <meta content="text/html; charset=utf-8" /> 
    <title>H5五子棋游戏</title> 
    <style type="text/css"> 
        body { 
            margin: 10px;
        } 
		div {
			text-align:center;
		}
		canvas{
			background-color:cornflowerblue;
		}
    </style> 
    <script type="text/javascript"> 
        var canvas; 
        var context; 
        var img_b = new Image(); 
        img_b.src = "b.png";
        var img_w = new Image(); 
        img_w.src = "w.png";
        function drawRect() {
            canvas = document.getElementById("canvas"); 
            context = canvas.getContext("2d"); 
  
            for (var i = 0; i <= 640; i += 40) {
                context.beginPath(); 
                context.moveTo(0, i); 
                context.lineTo(640, i); 
                context.closePath(); 
                context.stroke(); 
  
                context.beginPath(); 
                context.moveTo(i, 0); 
                context.lineTo(i, 640); 
                context.closePath(); 
                context.stroke(); 
            } 
        } 
        
    </script> 
</head> 
<body onload="drawRect()"> 
    <div> 
        <canvas width="640" id="canvas"  height="640">
        </canvas> 
    </div> 
  
</body> 
</html> 